<template>
  <div class="employees">
    <h1>员工列表</h1>
    <ul>
      <li v-for="employee in employees" :key="employee.id">
        {{ employee.name }} - {{ employee.position }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const employees = ref([
  { id: 1, name: '张三', position: '店长' },
  { id: 2, name: '李四', position: '咖啡师' },
  { id: 3, name: '王五', position: '收银员' }
])
</script>

<style scoped>
.employees {
  max-width: 500px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
h1 {
  font-size: 1.5em;
  margin-bottom: 16px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
li:last-child {
  border-bottom: none;
}
</style> 